<template>
  <div class="noticeSet">
    <el-form :model="config" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
      <el-form-item label="公告：" prop="content">
        <el-input size="small" placeholder="请填写内容，如果过长，将会在手机上滚动显示" v-model="config.content"></el-input>
      </el-form-item>

      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">背景颜色</div>
          <div class="deco-control-group__value">{{ config.bg_color }}</div>
        </div>
        <div class="deco-control-group__content">
          <el-button type="text" @click="config.bg_color = defaultBgColor" style="color:#0066ee;margin: 0 10px">重置</el-button>
          <el-color-picker v-model="config.bg_color" color-format="hex" :predefine="defaultColor" />
        </div>
      </div>
      <div class="deco-control-group-container">
        <div class="deco-control-group__header">
          <div class="deco-control-group__label">文本颜色</div>
          <div class="deco-control-group__value">{{ config.color }}</div>
        </div>
        <div class="deco-control-group__content">
          <el-button type="text" @click="config.color = defaultTxtColor" style="color:#0066ee;margin: 0 10px">重置</el-button>
          <el-color-picker v-model="config.color" color-format="hex" :predefine="defaultColor" />
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ['value','defaultColor'],
  data() {
    return {
      config: this.value ? this.value : {},
      defaultTxtColor: this.value.color,
      defaultBgColor: this.value.bg_color,
      rules: {
        content: [
          { required: true, message: '请填写公告内容', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    },
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {}
}
</script>

<style lang='less'>
@import './common.less';
.noticeSet {
  padding: 5px;
}
</style>
